<template>
  <div class="footer">
    <div :style="{opacity:isOpacity}" class="timer">{{ time }}</div>
    <div @click="feedback" class="feedback">意见反馈</div>
    <div @click="showCart" class="shopping-cart">
      <span>🛒购物车</span>
      <div class="count">{{count}}</div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

  export default {
    name:'MachineFooter',
    data(){
      return{
        // 记录购物车总数量
        count:0,
        // 记录倒计时
        time:60,
        // 显示定时器
        isOpacity:0
      }
    },
    methods:{
      feedback(){
        alert('感谢您的意见反馈！')
      },
      async showCart(){
        // console.log('显示购物车列表')
        // 获取购物车列表信息
        const res = await axios.get('/shoppingCart/list')
        // 如果购物车列表为空，则不展示购物车，并提示用户
        if(res.data.data.length <= 0){
          return alert('购物车为空！')
        }

        // 显示购物车列表
        this.$bus.$emit('showCarts',true)
        // 将获取到的购物车信息传递给ShoppingCart组件
        this.$bus.$emit('getCartList',res.data.data)
      },
    },
    async created(){
      const res = await axios.get('/shoppingCart/list')
      // 获取购物车数量数
      this.count = res.data.data.reduce((count, item)=> count + item.number, 0)
    },
    mounted(){
      // 实时更新count数据
      this.$bus.$on('updateCount',count => this.count += count)
      // 定时清空购物车
      this.timer = setInterval(()=>{
        this.time -= 1
        if(this.time < 0){
          this.time = 60
          // 清空购物车
          axios.delete('/shoppingCart/clean')
          // 记录购物车总数量
          this.count = 0
          // 返回首页
          // this.$store.dispatch('getGoodsList',{categoryId:'',pageNo:1})
          // this.$bus.$emit('backMainNav',0)
          // this.$bus.$emit('backAll',0)
          // 隐藏定时器
          this.isOpacity = 0
          // clearInterval(this.timer)
        }
      },1000)
      // 开启倒计时
      this.$bus.$on('retime',() => {
        this.time = 60
        this.isOpacity = 1
      })
    },
   
  }
</script>

<style scoped>
  .footer{
    margin: 10px 66px;
    width: 100%;
    height: 32px;
  }
  .timer{
    display: inline-block;
    margin-right: 766px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #f1efef;
    font-size: 20px;
    /* background-color: #df7128; */
    /* border-radius: 14px; */
  }
  .feedback{
    display: inline-block;
    margin-right: 20px;
    width: 86px;
    height: 30px;
    text-align: center;
    line-height: 28px;
    border-radius: 15px;
    font-size: 16px;
    color: #f1efef;
    background-color: #df7128;
    cursor: pointer;
  }
  .shopping-cart{
    display: inline-block;
    padding: 2px 6px;
    position: relative;
    width: 120px;
    height: 30px;
    line-height: 25px;
    border-radius: 15px;
    background-color: #df7128;
    cursor: pointer;
  }
  .shopping-cart span{
    color: #f1efef;
  }
  .shopping-cart .count{
    display: inline-block;
    margin-left: 5px;
    position: absolute;
    right: 14px;
    bottom: 7px;
    width: 18px;
    height: 18px;
    font-size: 14px;
    color: #df7128;
    text-align: center;
    line-height: 18px;
    background-color: #f1efef;
    border-radius: 9px;
  }
</style>